<template>
  <div>
    <el-table
      :data="list"
      class="width100">
      <el-table-column
        width="150"
        label="剪辑名称"
        prop="title">
      </el-table-column>
      <el-table-column
        label="关联创作"
        prop="name">
      </el-table-column>
      <el-table-column
        label="剪辑模式">
        <template slot-scope="scope">
          <div>{{ scope.row.type==3?'图文剪辑':scope.row.type==2?'口播剪辑':'AI剪辑' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="剪辑数量">
        <template slot-scope="scope">
          <div>{{ scope.row.maximumCount || '' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="剪辑状态">
        <template slot-scope="scope">
          <!-- 0 未剪辑 1剪辑中 2，剪辑完成（之前是=3） -->
          <div :class="scope.row.status==1 || scope.row.status==2 ? 'status-class' : 'no-status-class'">{{ scope.row.status==2?'剪辑完成':scope.row.status==1?'剪辑中':'未剪辑' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        label="创建时间"
        prop="createTime">
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right">
        <template slot-scope="scope">
            <!--if 剪辑完成则不能进行编辑-->
         <!-- <el-button @click="handleEdit(scope.$index, scope.row)" type="text" class="m-right20">编辑</el-button>
          <el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>-->
          <el-link :underline="false" :disabled="scope.row.status==2 ||scope.row.status==1 ? true : false" @click="handleEdit(scope.$index, scope.row)" type="primary" style="width: 60px">编辑</el-link>
          <el-link :underline="false" @click="generateVideo(scope.$index, scope.row)" type="warning" style="width: 60px">生成视频</el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此剪辑吗？"
            @confirm="handleDel(scope.$index, scope.row)"
          >
            <template v-slot:reference>
              <el-link :underline="false" type="danger" style="width: 60px">删除</el-link>
            </template>
          </el-popconfirm>
          <!--<keep-alive>
            <router-view></router-view>
            <router-link to=""></router-link>
          </keep-alive>-->
<!--          <el-button @click="viewSlices(scope.$index, scope.row)" type="text">查看成片</el-button>-->
          <el-link :underline="false" @click="viewSlices(scope.$index, scope.row)" type="success" style="width: 60px">查看成片</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!--分页按钮-->
    <el-pagination
      background
      layout="prev, pager, next,jumper, ->, total"
      :total="listCount"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-size="form.limit"
      style="text-align: center">
    </el-pagination>


    <!--‘生成视频’ 弹框-->
    <generate-pieces
      ref="videoAdd"
      :visible.sync="videoVisible"
      @query="query"
    >
    </generate-pieces>

  </div>
</template>

<script>
  import {scriptsDel} from "@/api/creatCenter/authoringClips";
  import GeneratePieces from "@/views/creatCenter/authoringClips/components/generate-pieces";
  export default {
    name: "table-list",
    components: {GeneratePieces},
    props: {
        currentPage:1,
        list:[],
        listCount:0,
        form:{}
    },
    data() {
      return {
        // '生成视频'弹窗是否打开
        videoVisible: false,
      };
    },
    methods: {
      //点击按钮切换页面
      handleCurrentChange(currentPage) {
        this.form.page = currentPage; //每次点击分页按钮，当前页发生变化
        this.$emit('see')
        console.log('this.currentPage)', this.currentPage);
      },
      // 查询表格
      query(){
        this.$emit('see')
      },
      /*编辑*/
      handleEdit(index, row) {
        // const  data = { settime:'11'}
        // sessionStorage.setItem('cs111',JSON.stringify(data))
        // localStorage.setItem('cs2222',JSON.stringify(data))
        // 需修改域名   // mode: 'history'_去掉vue路由中的#
        // 修改
        console.log(' location.href', location.href)
        sessionStorage.setItem('form', location.href)

        let url = 'http://localhost:8081/#/'
        var host =window.location.host;
        // let url = 'https://'+host+'/montage/index.html#/'
        console.log('剪辑url=========' ,url)



        // let url = 'https://oemkk.weijuyunke.com/montage/index.html#/'
        // let url = 'https://dsptt.admin168.net/montage/index.html#/'
        if (row.type == 1) {
          url = `${url}scriptIndex?id=${row.id}&type=${row.type}`
        }
        if (row.type == 2) {
          url = `${url}diy?id=${row.id}&type=${row.type}`
        }
        if (row.type == 3) {
          url = `${url}textEdit?id=${row.id}&type=${row.type}`
        }
        console.log("当前剪辑工程路径location.href",location.href,'路径===', url + '&from=' + location.href)
        window.open(url + '&from=' + location.href)
        // window.open(url + '&from=' + location.href, "_blank")
        // window.location.href = url + '&from=' + location.href
        // window.location.href = url + '&from=' + location.href

      },
      /*生成视频*/
      generateVideo(index, row) {
        console.log(index, row);
        this.videoVisible = true;
        this.$nextTick(()=>{
          //row.max
          this.$refs['videoAdd'].show(row)
        })
      },
      /*删除*/
      handleDel(index, row) {
        console.log(index, row);
        scriptsDel({
          id: row.id  //1剪辑比例
        })
          .then((data) => {
            this.$message.success(data.msg);
            console.log('data==========',data)
            this.$emit('see')
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },
      // 查看成片
      viewSlices(index, row){
        // id: row.id  //1剪辑比例
        console.log("row.id ========", row.id )
        // this.$router.push({path:'/creatCenter/piecemeal',query:{id: row.id }})
        this.$router.push({path:'/creatCenter/piecemeal',query:{title: row.title,id: row.id }})
      }
    },
    watch: {

    }
  };
</script>

<style scoped lang="less">
  /*<!-- 分页样式 -->*/
  /deep/ .el-table + .el-pagination {
    margin: 15px;
  }
  .no-status-class,.status-class{
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
    cursor: default;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 7px;
    height: 28px;
    border-radius: 2px;
    line-height: 1;
  }
  .no-status-class{
    color: rgb(51, 54, 57);
    background-color: #eee;
  }
  .status-class{
    color: #18a058;
    background-color: rgba(20, 142, 77, 0.12);
  }
</style>
